<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>报警事项</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1"
    />
    <link
      rel="stylesheet"
      href="../../lib/layui-v2.5.5/css/layui.css"
      media="all"
    />
    <link rel="stylesheet" href="../../css/public.css" media="all" />
    <link rel="stylesheet" href="../../lib/dateTime/bootstrap.css" />
    <link
      rel="stylesheet"
      href="../../lib/dateTime/bootstrap-datetimepicker.min.css"
    />
  </head>
  <style>
    .layui-btn {
      padding: 0 12px !important;
      margin-top: -5px;
    }
  </style>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <!-- 搜索条件 -->
        <fieldset class="table-search-fieldset" style="margin-bottom: 10px">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <div class="layui-form layui-form-pane">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">开始时间</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      id="beginTime"
                      lay-verify="required|account"
                      autocomplete="off"
                      placeholder="输入时间"
                      class="form-control"
                    />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">结束时间</label>
                  <div class="layui-input-inline">
                    <input
                      type="text"
                      id="endTime"
                      lay-verify="required|account"
                      autocomplete="off"
                      placeholder="输入时间"
                      class="form-control layui-input"
                    />
                  </div>
                </div>
                <!-- <div class="layui-inline">
                            <label class="layui-form-label">报警类型</label>
                            <div class="layui-input-inline">
                                <input type="text" id="alarmType" lay-verify="required|account" autocomplete="off" placeholder="输入报警类型" class="form-control layui-input">
                            </div>
                        </div> -->
                <div class="layui-inline">
                  <button
                    id="AlramSeach"
                    class="layui-btn layui-btn-primary"
                    style="margin-top: -5px"
                  >
                    <i class="layui-icon"></i> 搜 索
                  </button>
                  <button
                    id="24hours"
                    class="layui-btn layui-btn-primary"
                    style="margin-left: 17px"
                  >
                    <i class="layui-icon"></i> 最近24小时
                  </button>
                  <button id="threeDay" class="layui-btn layui-btn-primary">
                    <i class="layui-icon"></i> 最近三天
                  </button>
                  <button id="week" class="layui-btn layui-btn-primary">
                    <i class="layui-icon"></i> 最近一周
                  </button>
                  <button id="month" class="layui-btn layui-btn-primary">
                    <i class="layui-icon"></i> 最近30天
                  </button>
                </div>
              </div>
            </div>
          </div>
        </fieldset>
        <table
          class="layui-hide"
          id="HcurrentTableId"
          lay-filter="currentTableFilter"
        ></table>
      </div>
    </div>
    <script src="../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
    <script src="../../js/lay-config.js?v=1.0.4" charset="utf-8"></script>
    <script src="../../lib/dateTime/jquery-1.8.3.min.js"></script>
    <script src="../../lib/dateTime/bootstrap-datetimepicker.min.js"></script>
    <script src="../../lib/dateTime/bootstrap-datetimepicker.zh-CN.js"></script>
    <script>
      layui.use(["form", "table", "miniTab"], function () {
        // 2020-03-25 HF 保存token
        var token = sessionStorage.getItem("newtoken");
        var m = JSON.parse(sessionStorage.getItem("SaveRequest"));
        var url = "";
        console.log(m);
        var $ = layui.jquery,
          form = layui.form,
          miniTab = layui.miniTab,
          table = layui.table;
        miniTab.listen();

        /****************初始化当前url地址***************/
        if (m.Req == 1) {
          url =
            "/oms-web/events/events-stationcode?token=" +
            token +
            "&stationCode=" +
            m.stationCode;
        } else if (m.Req == 2) {
          url =
            "/oms-web/events/events-devicecode?token=" +
            token +
            "&deviceCode=" +
            m.deviceCode;
        } else if (m.Req == 3) {
          url =
            "/oms-web/events/events-terminalno?token=" +
            token +
            "&terminalNo=" +
            m.termNumber;
        }
        /****************初始化当前时间*****************/
        function add0(m) {
          return m < 10 ? "0" + m : m;
        } //避免少0
        // 当前时间
        var time = new Date();
        var year = time.getFullYear();
        var month = time.getMonth() + 1;
        var date = time.getDate();
        var hours = time.getHours();
        var minutes = time.getMinutes();
        var seconds = time.getSeconds();
        var s2 =
          year +
          "-" +
          add0(month) +
          "-" +
          add0(date) +
          " " +
          add0(hours) +
          ":" +
          add0(minutes) +
          ":" +
          add0(seconds);
        var s1 =
          year +
          "-" +
          add0(month) +
          "-" +
          add0(date) +
          " " +
          add0(0) +
          ":" +
          add0(0) +
          ":" +
          add0(0);
        $("#beginTime").val(s1);
        $("#endTime").val(s2);

        // 实时更新当前时间
        var cltime = setInterval(function () {
          let nowtime = new Date();
          var s1 = GMTToStr(nowtime);
          $("#endTime").val(s1);
        }, 1000);

        /***********************最近24小时***********************/
        $("#24hours").click(function () {
          let end = new Date();
          let start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 1);
          var s1 = GMTToStr(start);
          var s2 = GMTToStr(end);
          var beginTime = s1;
          var endTime = s2;
          index = layer.load(1);
          getAlarmData(url, beginTime, endTime);
        });
        /***********************最近3天***********************/
        $("#threeDay").click(function () {
          let end = new Date();
          let start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
          var s1 = GMTToStr(start);
          var s2 = GMTToStr(end);
          var beginTime = s1;
          var endTime = s2;
          index = layer.load(1);
          getAlarmData(url, beginTime, endTime);
        });
        /***********************最近一周***********************/
        $("#week").click(function () {
          let end = new Date();
          let start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
          var s1 = GMTToStr(start);
          var s2 = GMTToStr(end);
          var beginTime = s1;
          var endTime = s2;
          index = layer.load(1);
          getAlarmData(url, beginTime, endTime);
        });
        /***********************最近一周***********************/
        $("#month").click(function () {
          let end = new Date();
          let start = new Date();
          start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
          var s1 = GMTToStr(start);
          var s2 = GMTToStr(end);
          var beginTime = s1;
          var endTime = s2;
          index = layer.load(1);
          getAlarmData(url, beginTime, endTime);
        });

        // 输入日期  报警事项  搜索结果
        $("#AlramSeach").click(function () {
          var beginTime = $("#beginTime").val();
          var endTime = $("#endTime").val();
          index = layer.load(1);
          // 判断时间非空
          if (beginTime != "" && endTime != "") {
            function getDaysByDateString(dateString1, dateString2) {
              var startDate = Date.parse(dateString1);
              var endDate = Date.parse(dateString2);
              var diffDate = endDate - startDate + 1 * 24 * 60 * 60 * 1000;
              var days = parseInt(diffDate / (1 * 24 * 60 * 60 * 1000));
              return days;
            }
            // 验证查询时间   不能过大和过小
            days = getDaysByDateString(beginTime, endTime);
            console.log(days);

            if (days > 180) {
              layer.msg("错误！查询时间段不能大于180天");
              return false;
            }
            getAlarmData(url, beginTime, endTime);
            if (days < 0 || days == 0) {
              layer.msg("错误！开始时间必须大于结束时间");
              layer.close(index);
              return false;
            }
          } else {
            layer.msg("请填写时间！");
          }
        });

        //  绘制表格
        function getAlarmData(url, beginTime, endTime) {
          table.render({
            elem: "#HcurrentTableId",
            url: url + "&beginTime=" + beginTime + "&endTime=" + endTime,
            method: "POST",
            // contentType:"application/json",
            parseData: function (res) {
              //res 即为原始返回的数据
              return {
                code: res.code, //解析接口状态
                msg: res.msg, //解析提示文本
                count: res.data.total, //解析数据长度
                data: res.data.list, //解析数据列表
              };
            },
            toolbar: "#toolbarDemo",
            defaultToolbar: [
              "filter",
              "exports",
              "print",
              {
                title: "提示",
                layEvent: "LAYTABLE_TIPS",
                icon: "layui-icon-tips",
              },
            ],

            cols: [
              [
                //复选框 {type: "checkbox", width: 50, fixed: "left"},
                { type: "numbers", width: 40, title: "序号", align: "center" },
                {
                  field: "stationName",
                  width: 150,
                  title: "站名称",
                  align: "center",
                },
                {
                  field: "deviceName",
                  width: 150,
                  title: "设备名称",
                  align: "center",
                },
                {
                  field: "terminalName",
                  width: 130,
                  title: "终端名称",
                  align: "center",
                },
                {
                  field: "ptsName",
                  width: 100,
                  title: "测量点",
                  align: "center",
                },
                {
                  field: "dataValue",
                  width: 80,
                  title: "数值",
                  sort: true,
                  align: "center",
                },
                {
                  field: "typeText",
                  width: 130,
                  title: "报警类型",
                  align: "center",
                },
                {
                  field: "eventText",
                  minWidth: 50,
                  title: "报警描述",
                  align: "center",
                },
                {
                  field: "eventTime",
                  minWidth: 50,
                  title: "时间",
                  align: "center",
                },
                // {title: '操作', minWidth: 50, templet: '#currentTableBar', fixed: "right", align: "center"}
              ],
            ],
            limits: [10, 15, 20, 25, 50, 100],
            limit: 10,
            page: true,
            done: function (res) {
              if (res.code == -1) {
                window.location = "../login-1.html";
              }
              //  清楚缓存
              layer.close(index);
            },
          });
        }
        //获取时间函数
        function GMTToStr(time) {
          function add0(m) {
            return m < 10 ? "0" + m : m;
          } //避免少0
          var time = new Date(time);
          var year = time.getFullYear();
          var month = time.getMonth() + 1;
          var date = time.getDate();
          var hours = time.getHours();
          var minutes = time.getMinutes();
          var seconds = time.getSeconds();
          return (
            year +
            "-" +
            add0(month) +
            "-" +
            add0(date) +
            " " +
            add0(hours) +
            ":" +
            add0(minutes) +
            ":" +
            add0(seconds)
          );
        }

        // 日期插件
        $("#beginTime").datetimepicker({
          language: "zh-CN", //显示中文
          format: "yyyy-mm-dd hh:ii:ss", //显示格式
          // minView: "month",//设置只显示到月份
          //   initialDate: new Date(),//初始化当前日期
          autoclose: true, //选中自动关闭
          todayBtn: true, //显示今日按钮
          // minView:'month',
          language: "zh-CN",
        });

        $("#endTime")
          .datetimepicker({
            language: "zh-CN", //显示中文
            format: "yyyy-mm-dd hh:ii:ss", //显示格式
            // minView: "month",//设置只显示到月份
            //   initialDate: new Date(),//初始化当前日期
            autoclose: true, //选中自动关闭
            todayBtn: true, //显示今日按钮
            // minView:'month',
            language: "zh-CN",
          })
          .on("changeDate", function (ev) {
            window.clearInterval(cltime);
          });
      });
    </script>
  </body>
</html>
